<template>
  <dys-search-form
    @search="reload"
    @reset="Object.assign(queryParams, initValue())"
  >
    <a-col :span="6">
      <a-form-item :label="t('组织名称')">
        <a-input
          v-model:value="queryParams.organizationName"
          :placeholder="t('请输入组织名称')"
        ></a-input>
      </a-form-item>
    </a-col>
    <a-col :span="6">
      <a-form-item :label="t('组织编码')">
        <a-input
          v-model:value="queryParams.organizationCode"
          :placeholder="t('请输入组织编码')"
        ></a-input>
      </a-form-item>
    </a-col>
  </dys-search-form>
  <dys-table
    :loading="state.loading"
    :columns="columns"
    :pagination="state.pagination"
    :data-source="state.dataSource"
    default-size="small"
    @reload="reload"
    @change="handleChange"
  >
    <template #extraLeft>
      <a-button type="primary" v-auth:ADD @click="modalState.open = true">
        <PlusCircleOutlined />
        {{ t("新增") }}
      </a-button>
    </template>
    <template #bodyCell="{ column, record, text }">
      <status-tag
        v-if="column.dataIndex == 'organizationStatus'"
        :value="text"
      ></status-tag>
      <template v-if="column.dataIndex == 'operation'">
        <a-button
          v-auth:UPDATE
          type="link"
          size="small"
          @click="
            modalState.model = record;
            modalState.open = true;
          "
        >
          {{ t("编辑") }}
        </a-button>
        <a-button
          v-auth:DELETE
          type="link"
          size="small"
          danger
          @click="handleDelete(record)"
        >
          {{ t("删除") }}
        </a-button>
      </template>
    </template>
  </dys-table>
  <edit-modal
    :open="modalState.open"
    :model="modalState.model"
    @cancel="
      modalState.model = null;
      modalState.open = false;
    "
    @ok="reload"
  ></edit-modal>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import { useFetchPage } from "@/hook/useFetchPage";
import { del, queryByPage } from "@/api/system/organization";
import { message, type TableColumnsType } from "ant-design-vue";
import type {
  QueryParams,
  QueryResult,
} from "@/api/system/organization/typing";
import EditModal from "./components/edit-modal.vue";
import StatusTag from "@/components/status-tag/index.vue";
const { t } = useI18n();
const initValue = (): QueryParams => ({
  organizationName: null,
  organizationCode: null,
});
const queryParams = reactive(initValue());
const columns = reactive<TableColumnsType>([
  { title: () => t("组织类型"), dataIndex: "organizationTypeName" },
  { title: () => t("组织名称"), dataIndex: "organizationName" },
  { title: () => t("组织编码"), dataIndex: "organizationCode" },
  { title: () => t("组织状态"), dataIndex: "organizationStatus" },
  { title: () => t("操作"), dataIndex: "operation", fixed: "right" },
]);
const { state, reload, handleChange } = useFetchPage(queryByPage, {
  params: queryParams,
});
const modalState = reactive({
  open: false,
  model: null,
});
/**删除 */
const handleDelete = async (record: QueryResult) => {
  const { success } = await del({ organizationId: record.organizationId });
  if (success) {
    message.success(t("删除成功"));
    reload();
  }
};
</script>
